<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<style type="text/css">
.login_overlay{
	display:none;
	z-index: 10000;
	background-color:#333;
	
	width:800px;
	height:500px;
	padding:5px;
	border:1px solid #666;
	
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow:0 0 90px #000;
}

.login_overlay .close {
	background-image:url(resources/img/overlay/close.png);
	position:absolute; 
	right:-64px; 
	top:-64px;
	cursor:pointer;
	height:128px;
	width:128px;
}

.login_overlay .pwd {
	z-index: 10001;
	height:64px;
	width:640px;
	top:218px;
	left:16px;
	font-size: 48px;
	position:absolute; 
}

.login_overlay .key {
	background-image:url(resources/img/login/key.png);
	z-index: 10001;
	height:128px;
	width:128px;
	top:196px;
	left:666px;
	position:absolute; 
}

.login_overlay .pwd_label {
	color: yellow;
	z-index: 10001;
	height:64px;
	width:640px;
	top:148px;
	left:16px;
	font-size: 48px;
	position:absolute; 
}

.login_overlay .warning {
	display: none;
	background-color:#ff0000;
	color: #ffffff;
	z-index: 10001;
	width:800px;
	top:300px;
	left:5px;
	font-size: 48px;
	text-align: center;
	position:absolute; 
}
</style>
<div class="login_overlay" id="loginOverlay">
	<div class="pwd_label"><c:out value="${ labelBean.passwordLabel }" /></div>
	<form action="config" id="login_form">
	</form>
	<input class="pwd" type="password" name="password" id="password"/>
	<div class="key"></div>
	<div id="warning" class="warning"></div>
</div>
<script type="text/javascript">
$(".key").click(function(){
	$.post("login", {
		password: $("#password").attr("value")
	}, function(data){
		if(data.succeed){
			$("#login_form").submit();
		}else{
			$("#warning").html(data.message);
			$("#warning").fadeIn(1000);
			$("#warning").fadeOut(1000);
			$("#password").focus();
		}
	}, "json");
});
</script>